<template>
  <div class="home">
    <div class="home-top">
      <div class="home-item" v-for="item in homeList" :key="item.label">
        <div class="home-item-label">{{ item.label }}</div>
        <div class="home-item-value">{{ numData[item.value] }}</div>
      </div>
    </div>

    <div class="home-search">
      <Input
        class="home-search-input"
        v-model="params.code"
        placeholder="扫描物流单号，开始检查"
        @on-enter="enterHandle"
        :border="false"
      ></Input>
      <img
        @click="enterHandle"
        src="../../assets/search-icon.png"
        alt=""
        srcset=""
      />
    </div>

    <Modal
      v-model="showModal"
      title="订单卡片"
      @on-ok="confirmHandle"
      @on-cancel="showModal = false"
    >
      <div class="modal-wrapper">
        <div class="row">
          <div class="row-title">手机号</div>
          <div class="row-desc">{{ orderData.mobile }}</div>
        </div>
        <div class="row">
          <div class="row-title">商品名称</div>
          <div class="row-desc">{{ orderData.goodsName }}</div>
        </div>
        <div class="row">
          <div class="row-title">规格</div>
          <div class="row-desc">{{ orderData.goodsNum }}</div>
        </div>
        <div class="row">
          <Input
            v-model="orderData.factoryRemark"
            type="textarea"
            :rows="4"
            placeholder="请输入备注"
            @on-enter="confirmHandle"
          />
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      homeList: [
        {
          label: "预计今日到货",
          value: "todyarrivalnum",
        },
        {
          label: "预计明日到货",
          value: "tomorrowarrivalnum",
        },
        {
          label: "洗护中",
          value: "wishnum",
        },
        {
          label: "返回中",
          value: "backnum",
        },
      ],
      params: { code: "" },
      showModal: false,

      numData: {
        todyarrivalnum: 0,
        tomorrowarrivalnum: 0,
        wishnum: 0,
        backnum: 0,
      },
      orderData: {
        mobile: "",
        factoryRemark: "",
        goodsNum: "",
        goodsName: "",
        orderCode: "",
      },
    };
  },
  computed: {},
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.axios.get("/factory/order/countByState").then((res) => {
        console.log(res, "factory/order/countByState");
        this.numData = res.data;
      });
    },
    async enterHandle(val) {
      if (!this.params.code) {
        this.$Message.warning("请输入物流单号查询");
      } else {
        const orderData = await this.axios.get(
          "/factory/order/getByDeliveryNo",
          {
            params: {
              deliveryNo: this.params.code,
            },
          }
        );
        this.orderData = orderData.data;

        this.showModal = true;
      }
    },
    confirmHandle() {
      const reqData = {
        factoryRemark: this.orderData.factoryRemark,
        orderCode: this.orderData.orderCode,
      };
      this.axios.post("/factory/order/factoryRemark", reqData).then(res => {
        this.show = false
      })
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  &-top {
    width: 100%;
    height: 40vh;
    background-color: #fff;
    border-radius: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20px auto;
  }
  &-item {
    width: 23%;
    height: 34vh;
    background-color: #e0eaff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border-radius: 6px;
    font-size: 36px;
    font-weight: 500;

    &-value {
      color: #0256ff;
    }
  }
}
.home-search {
  width: 60%;
  height: 80px;
  font-size: 40px;
  display: flex;
  padding: 20px;
  padding-left: 0;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  margin: 10vh auto 0;
  img {
    width: 50px;
  }
  &-input {
    border: none;
    display: flex;
    width: 90%;
    input {
      flex: 1;
      border: none !important;
    }
  }
  /deep/ .ivu-input {
    border: none;
    height: 76px;
    font-size: 30px;
    padding-left: 20px;
  }
}

.modal-wrapper {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  justify-content: space-between;
  padding: 4px;
  margin: 4px;
  border-bottom: dashed 1px #efefef;
  font-size: 15px;
  &-desc {
    color: #717171;
  }
}
</style>
